<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>设置-个人信息</title>
    <link rel="icon" href="/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-seckillOrder.css"/>
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/sui/sui.min.js"></script>

</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">畅购欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a
                                href="register.html" target="_blank">免费注册</a></span></li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types">
                            <li class="f-item"><span>我的订单</span></li>

                            <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="home.html" target="_blank">我的畅购</a></span></li>
                            <li class="f-item"><span>畅购会员</span></li>
                            <li class="f-item"><span>企业采购</span></li>
                            <li class="f-item"><span>关注畅购</span></li>
                            <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                            <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                            <li class="f-item"><span>网站导航</span></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="畅购" href="index.html" target="_blank"></a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g home">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">

                <div class="person-info">
                    <div class="person-photo"><img src="/img/_/photo.png" alt=""></div>
                    <div class="person-account">
                        <span class="name">Michelle</span>
                        <span class="safe">账户安全</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd><a href="/api/wcenter/tocenter">我的订单</a></dd>
                        <dd><a href="/api/wcenter/toPay">待付款</a></dd>
                        <dd><a href="/api/wcenter/toSend">待发货</a></dd>
                        <dd><a href="/api/wcenter/toReceive">待收货</a></dd>
                        <dd><a href="/api/wcenter/toEvaluate">待评价</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="/api/wcenter/toCollect">我的收藏</a></dd>
                        <dd><a href="center-footmark.html">我的足迹</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 物流消息</dt>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="/api/wcenter/toSettingInfo">个人信息</a></dd>
                        <dd><a href="/api/wcenter/toSettingAddress">地址管理</a></dd>
                        <dd><a href="/api/wcenter/toSettingSafe" class="list-active">安全管理</a></dd>
                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6">
                <div class="body userSafe">
                    <ul class="sui-nav nav-tabs nav-large nav-primary ">
                        <li class="active" id="pwd_setting"><a href="#one" data-toggle="tab">密码设置</a></li>
                        <li id="phone_setting"><a href="#two" data-toggle="tab">绑定手机</a></li>
                    </ul>
                    <div class="tab-content " id="tab_info">
                        <div id="one" class="tab-pane active">
                            <form class="sui-form form-horizontal sui-validate" id="jsForm">

                                <div class="control-group">
                                    <label for="password" class="control-label">原密码：</label>
                                    <div class="controls">
                                        <input class="fn-tinput" type="password" v-model="pojo.password"
                                               placeholder="原密码" required id="password" data-rule-remote="php.php">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="new_password" class="control-label">新密码：</label>
                                    <div class="controls">
                                        <input class="fn-tinput" type="password" placeholder="新密码" required  v-model="pojo.new_password"
                                               id="new_password" data-rule-remote="php.php">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="confirm_password" class="control-label">确认密码：</label>
                                    <div class="controls">
                                        <input class="fn-tinput" type="password" placeholder="新密码" required  v-model="pojo.confirm_password"
                                               id="confirm_password" data-rule-remote="php.php">
                                    </div>
                                </div>
                            </form>
                                <div class="control-group">
                                    <label class="control-label"></label>
                                    <div class="controls">
                                        <button @click="changePassword()" class="sui-btn btn-primary">提交按钮</button>
                                    </div>
                                </div>

                        </div>

                        <div id="two" class="tab-pane">
                            <!--步骤条-->
                            <div class="sui-steps steps-auto" id="phone_setting_form">
                                <div class="wrap">
                                    <div class="step finished">
                                        <label><span class="round"><i
                                                class="sui-icon icon-pc-right"></i></span><span>第一步
													验证身份</span></label><i class="triangle-right-bg"></i><i
                                            class="triangle-right"></i>
                                    </div>
                                </div>
                                <div class="wrap">
                                    <div class="step todo">
                                        <label><span class="round">2</span><span>第二步 绑定新手机号</span></label><i
                                            class="triangle-right-bg"></i><i class="triangle-right"></i>
                                    </div>
                                </div>
                                <div class="wrap">
                                    <div class="step todo">
                                        <label><span class="round">3</span><span>第三步 完成</span></label>
                                    </div>
                                </div>
                            </div>

                            <!--表单-->
                            <form class="sui-form form-horizontal sui-validate" data-toggle='validate' action="#"
                                  id="bind-form">
                                <div class="control-group">
                                    <label class="control-label">验证方式：</label>
                                    <div class="controls fixed">手机验证（138****9856）</div>
                                </div>

                                <div class="control-group">
                                    <label for="msgcode" class="control-label">短信验证码：</label>
                                    <div class="controls">
                                        <input name="msgcode" type="text" id="msgcode" v-model="smsCode">
                                    </div>
                                    <div class="controls">
                                        <button class="sui-btn btn-info" @click="sendoldphone()">发送</button>
                                    </div>
                                </div>
                                <div class="control-group next-btn">
                                    <a class="sui-btn btn-primary" href="javascript:void(0);" @click="checkoldphone()" id="first_step">下一步</a>
                                </div>
                            </form>


							<form class="sui-form form-horizontal sui-validate" data-toggle='validate' action="#" onSubmit="return false;" id="bind-form3">
								<div class="control-group">
									<label for="phone" class="control-label">手机号</label>
									<div class="controls">
										<input name="msgcode" type="text" id="phone" v-model="fresh.mobile" >
									</div>
								</div>


								<div class="control-group">
									<label for="msgcode" class="control-label">验证码</label>
									<div class="controls">
                                        <input name="msgcode" type="text" id="msgcode2" v-model="fresh.smscode">
                                    </div>
									<div class="controls">
										<button class="sui-btn btn-info" @click="sendnewphone()">发送</button>
									</div>
								</div>
								<div class="control-group next-btn">
									<a class="sui-btn btn-primary" href="javascript:void(0);" @click="changephone()" id="second_step">下一步</a>
								</div>
							</form>

							<form class="sui-form form-horizontal sui-validate" data-toggle='validate' id="bind-form2">
								<div class="control-group">
									<h1>恭喜您 ! 手机号码修改成功</h1>
								</div>
							</form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>畅购E卡</li>
                            <li>畅购通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="./img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们<span class="space"></span></li>
                    <li>联系我们<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>商家入驻<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们</li>
                </ul>
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                <p>京ICP备08001421号京公网安备110108007702</p>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/healthmobile.js"></script>
<script>

    var app = new Vue({
        el: '#account',
        data: {
            pojo: {},
            smsCode:'',
            fresh:{},
        },
        methods: {
            changephone(){
                axios.get(`/api/wcenter/changephone/${this.fresh.mobile}/${this.fresh.smscode}`).then(response => {
                    if(!response.data.flag){
                        alert(response.data.message);
                    }
                });
            },
            sendnewphone(){
                //手机号码校验
                var telephone = this.fresh.mobile;
                if (!checkTelephone(telephone)) {
                    alert("请输入正确的手机号");
                    return false;
                }
                axios.get(`/api/wcenter/sendnewphone?mobile=${this.fresh.mobile}`).then(response => {
                    if(!response.data.flag){
                        //手机号已注册
                        alert(response.data.message);
                    }
                });
            },
            checkoldphone(){
                axios.get(`/api/wcenter/checkoldphone?smsCode=`+smsCode).then(response => {
                    if(!response.data.flag){
                        alert(response.data.message);
                    }
                });
            },
            sendoldphone(){
                axios.get(`/api/wcenter/sendoldphonesms`).then(response => {
                    if(!response.data.flag){
                        alert(response.data.message);
                    }
                });
            },
            changePassword(){

                if(this.pojo.confirm_password!=this.pojo.new_password){
                    return ;
                }
                axios.post(`/api/wcenter/changepassword`, this.pojo).then(response => {
                    if (response.data.flag){
                        alert(response.data.message);
                        this.pojo={};
                    }else {
                        alert(response.data.message);
                    }

                });
            },
        },
        created: function () {
            this.loadAddressList();
        }
    });
</script>

<script>

    $(function () {
        //初始化标签页状态
        $("#tab_info>div").hide();
		$("#two form").hide();
		$("#two form:eq(0)").show();


        //密码修改
        $('#pwd_setting>a').click(function (e) {
            $("#tab_info>div").hide();
            $($(this).attr("href")).show()
        })

        //手机号设置
        $('#phone_setting>a').click(function (e) {
            $("#tab_info>div").hide();
            $($(this).attr("href")).show();

			$("#phone_setting_form .step").prop("class","step todo");
			$("#phone_setting_form .step:eq(0)").prop("class","step finished")

			$("#two form").hide();
			$("#two form:eq(0)").show();
        })

		$("#first_step").click(function () {
			$("#phone_setting_form .step").prop("class","step todo");
			$("#phone_setting_form .step:eq(1)").prop("class","step finished")
			$("#two form").hide();
			$("#two form:eq(1)").show();

		});

		$("#second_step").click(function () {
			$("#phone_setting_form .step").prop("class","step todo");
			$("#phone_setting_form .step:eq(2)").prop("class","step finished")
			$("#two form").hide();
			$("#two form:eq(2)").show();
		});

		$('#pwd_setting>a').click();


    })


</script>
</body>

</html>